<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>分类</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css?v=2" />
	<link rel="stylesheet" type="text/css" href="css/popup.css" />
	<script src="js/config.js"></script>
	<script src="js/jquery-1.8.1.min.js"></script>
	<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="js/component.js?v=78"></script>

</head>

<body class="bodybg">
	<div id="app" v-clock>
		<div class="topss">
			<div class="topssbox">
				<img src="img/index/s.png" />
				<input type="text" placeholder="搜索你感兴趣的课程" class="ss-input" v-model="keyword" @keyup.enter="submit" />
			</div>
		</div>
		<template v-if="categories.length>0">
			<div class="typeNav typeNav2">
				<ul class="typeNav_tabbar d-f a-c-c">
					<li v-bind:class="scrollId == 'n'+item.id?'on':''" v-for="(item,index) in categories" v-key="index"
						@click="scrollTap(item.id,index)">
						{{item.name}}
						<span class="line"></span>
					</li>
				</ul>
				<div class="keshi-fenlei">
					<ul class="keshi-two">
						<template v-for="item in categories[firstLevelIndex].sub">
							<li @click="goMore(item.id)" :class="{on:secondCateId==item.id}">{{item.name}}</li>
						</template>
					</ul>
					<div class="keshi-more" @click="goCategoryMore">
						更多
						<img src="img/index/right.png" class="right-icon" />
					</div>
				</div>
			</div>
			<div class="category-wrapper">

				<div class="hotbox category-cells" v-for="(item,index) in categories[firstLevelIndex].sub">
					<div class="category-title">
						<div class="category-titleL"><span class="lineL"></span> {{item.name}}</div>
						<div class="category-titleR" @click="goMore(item.id)">
							更多
							<img src="img/index/right.png" class="right-icon" />
						</div>
					</div>
					<ul class="keshi-kecheng" v-if="videoAndTopicData[firstLevelIndex]">
						<li v-for="it in videoAndTopicData[firstLevelIndex][item.id]" @click="go(it)">
							<div class="hotbox-top">
								<img v-bind:src="it.data.cover_url" class="product-img" />
								<div class="hotbox-label">
									<div class="spsc d-f a-c-c" v-if="1==it.type">
										<img src="img/index/shipin.png" class="spsc-icon" />
										<span class="spsc-num">{{ durationFormat(it.data.duration) }}</span>
									</div>
									<div class="spsc d-f a-c-c" v-else></div>
									<div class="sp-label">
										<button class="sp-label-btn" v-if="1==it.type">视频</button>
										<button class="sp-label-btn zhuanlan" v-else>专栏</button>
									</div>
								</div>
							</div>
							<p class="product-title">{{ it.data.title }}</p>
							<div class="product-leibie">
								<span>热度{{ it.hot }}</span>
							</div>
						</li>
					</ul>
				</div>

			</div>
		</template>
		<footbox active="fenlei"></footbox>
	</div>
</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			keyword: '',

			scrollLeft: 1,
			scrollId: 'n1',
			categories: [],

			secondCateId: null,

			firstLevelIndex: 0,

			videoAndTopicData: {}
		},
		created() {
			this.getTree()
		},
		methods: {
			getTree() {
				axios.get('/mp/category/tree').then(res => {
					this.categories = res.data
					this.getVideoAndTopic()
				})
			},
			getVideoAndTopic() {
				if (this.videoAndTopicData[this.firstLevelIndex]) {
					return;
				}
				const categoris = this.categories[this.firstLevelIndex].sub;
				const ids = categoris.map(e => {
					return e.id
				})
				axios.get('/mp/category/videoAndTopic', { params: { ids, size: 3 } }).then(res => {
					this.$set(this.videoAndTopicData, this.firstLevelIndex, res.data);
				})
			},
			scrollTap(id, index) {
				this.firstLevelIndex = index
				this.scrollId = 'n' + id
				this.getVideoAndTopic()
			},
			goMore(id) {
				this.secondCateId = id;
				window.location.href = "/fenleishipin.html?id=" + id
			},
			goCategoryMore() {
				window.location.href = "/fenlei-xuanzefenlei.html?id=" + this.categories[this.firstLevelIndex].id;
			},
			go(item) {
				window.location.href = (1 == item.type ? '/shipinxuexi.html?id=' : '/zhuantimulu.html?id=') + item.data.id;
			},

			// 搜索
			submit() {
				const keyword = this.keyword.trim();
				if ('' === keyword) {
					return;
				}
				window.location.href = '/sousuojieguo.html?keyword=' + encodeURIComponent(keyword);
			},

			// 时间格式化
			durationFormat(second) {
				let time = '';
				if (second > 3600) {
					// 超过1小时
					time = parseInt(second / 3600) + ':';
					second = second % 3600;
				}
				return time + parseInt(second / 60) + ':' + parseInt(second % 60);
			},
		}
	})
</script>

</html>